<template>
  <div>
    <van-tabs v-model="active" @click="tabsClick">
      <van-tab v-for="item in orderTabs" :title="item.title" :key="item.title">
        <van-card
          v-for="order in Calulatorderstatus"
          :key="order.order_id"
          :num="order.number"
          :price="order.total_price"
          :desc="order.pay_way"
          :title="order.goodsInfo.message[0].title"
          :thumb="order.goodsInfo.message[0].thumb_path"
          @click="showOrder(order)"
        >
          <template #footer>
            <van-button
              v-if="
                order.is_out == 1 && order.status == 1 && order.is_take == 0
              "
              size="mini"
              type="primary"
              >物流信息
            </van-button>
            <template v-if="order.status == 0">
              <van-button
                size="mini"
                color="linear-gradient(to right, #be99ff, #7232dd)"
                v-clipboard:copy="order.order_id"
                v-clipboard:success="onCopy"
              >
                复制订单号
              </van-button>
              <van-button size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)">立即付款</van-button>
            </template>
            <van-button
              v-if="order.status == 1 && order.is_out == 0"
              size="mini"
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >提醒发货</van-button
            >
            <template
              v-if="
                order.is_take == 1 && order.is_out == 1 && order.status == 2
              "
            >
              <van-button size="mini" type="info">已完成</van-button>
              <van-button size="mini" type="warning">去评价</van-button>
            </template>
            <van-button size="mini" type="danger" @click.stop="callPhone"
              >客服</van-button
            >
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { fetchUserOrder } from "@/api/order.js";
import { fetchCartGoods } from "@/api/index.js";
export default {
  data() {
    return {
      active: 0,
      orderTabs: [
        { title: "全部", status: "all" },
        { title: "未付款", status: "0" },
        { title: "已付款", status: "1" },
        { title: "完成", status: "2" },
      ],
      allOrder: [],
      status: "all", // 记录当前状态
    };
  },
  created() {
    // 获取用户的订单
    this._fetchUserOrder();
  },
  methods: {
    async _fetchUserOrder() {
      let user_id = this.$store.state.userInfo.id;
      let orderData = await fetchUserOrder(user_id);
      // goods_ids = [Object Object]

      // 因为订单只有基本信息没有订单商品信息,所以还要通过接口获取订单的商品信息
      // 可以在每个订单中额外添加一个属性如goodsInfo存放订单商品的信息，便于后面的循环操作

      let promiseArr = [];
      orderData.forEach((order) => {
        //   console.log(order.goods_ids) // [Object Object]
        //   console.log(order.goods_ids);
        // order.goodsInfo = fetchCartGoods(order.goods_ids);
        promiseArr.push(fetchCartGoods(order.goods_ids));
      });
      //   console.log(promiseArr);
      //   并发获取订单关联商品
      let allOrderGoods = await Promise.all(promiseArr);
      console.log(allOrderGoods);
      //   将订单和订单商品进行关联，订单商品存储到订单的goodsInfo属性中
      orderData = orderData.map((order, index) => {
        order.goodsInfo = allOrderGoods[index];
        return order;
      });
      //   console.log(orderData);
      this.allOrder = orderData;
      //   console.log(this.allOrder)
    },
    // 通过订单状态status筛选出指定的订单
    findStatusOrder(status) {
      //all 0 1 2
      if (status == "all") {
        return this.allOrder;
      }
      return this.allOrder.filter((order) => order.status == status);
    },
    tabsClick(index, text) {
      let statusMap = {
        全部: "all",
        未付款: "0",
        已付款: "1",
        完成: "2",
      };
      this.status = statusMap[text];
    },
    callPhone() {
      this.$dialog
        .confirm({
          message: "拨打安福客服电话?",
        })
        .then(() => {
          // on confirm
          window.location.href = "tel:13612362023";
        })
        .catch(() => {
          // on cancel
        });
    },
    // 复制到系统粘贴板
    onCopy(e) {
      window.event.stopPropagation(); // 阻止事件冒泡
      this.$toast("复制成功");
    },
    showOrder(orderInfo) {
      this.$router.push("/orderDetail/" + orderInfo.order_id);
    },
  },
  computed: {
    Calulatorderstatus() {
      // all 0 1 2
      if (this.status == "all") {
        return this.allOrder;
      }
      return this.allOrder.filter((order) => order.status == this.status);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
